<template>
  <div>
    <highcharts :options="chartOptions" :callback="myCallback"></highcharts>
    <highcharts :options="chartOptions2" :callback="myCallback2"></highcharts>
    <highcharts :options="chartOptions3" :callback="myCallback3"></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
export default {
  name: "HelloWorld",
  components: {
    highcharts: Chart,
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: "2010 ~ 2016 年太阳能行业就业人员发展情况",
        },
        subtitle: {
          text: "图表的小标题",
        },
        yAxis: {
          title: {
            text: "左边的图表标题",
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010,
          },
        },
        series: [
          {
            name: "安装，实施人员",
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
          },
          {
            name: "工人",
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
          },
          {
            name: "销售",
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
          },
          {
            name: "项目开发",
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
          },
          {
            name: "其他",
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
          },
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      },
      chartOptions2: {
        chart: {
          type: "column",
        },
        title: {
          text: "按性别划分的水果消费总量",
        },
        xAxis: {
          categories: ["苹果", "橘子", "梨", "葡萄", "香蕉"],
        },
        yAxis: {
          allowDecimals: false,
          min: 0,
          title: {
            text: "水果数量",
          },
        },
        tooltip: {
          formatter: function () {
            return (
              "<b>" +
              this.x +
              "</b><br/>" +
              this.series.name +
              ": " +
              this.y +
              "<br/>" +
              "总量: " +
              this.point.stackTotal
            );
          },
        },
        plotOptions: {
          column: {
            stacking: "normal",
          },
        },
        series: [
          {
            name: "小张",
            data: [5, 3, 4, 7, 2],
            stack: "male", // stack 值相同的为同一组
          },
          {
            name: "小潘",
            data: [3, 4, 4, 2, 5],
            stack: "male",
          },
          {
            name: "小彭",
            data: [2, 5, 6, 2, 1],
            stack: "female",
          },
          {
            name: "小王",
            data: [3, 0, 4, 4, 3],
            stack: "female",
          },
        ],
      },
      chartOptions3: {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "2022水果销量市场份额",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [
              {
                name: "香蕉",
                y: 61.41,
                sliced: true,
                selected: true,
              },
              {
                name: "苹果",
                y: 11.84,
              },
              {
                name: "梨",
                y: 10.85,
              },
              {
                name: "菠萝",
                y: 4.67,
              },
              {
                name: "火龙果ri",
                y: 4.18,
              },
              {
                name: "其它",
                y: 7.05,
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    myCallback() {
      // console.log("图表类容");
    },
    myCallback2() {},
    myCallback3() {},
  },
};
</script>

<style scoped lang='less'>
.highcharts-container {
  width: auto;
  height: 400px;
  border: 1px solid #ddd;
  margin: auto;
}
</style>